<template>
	<div class="chat-main">
		<ul class="chat-ul">
			<li v-for="(item, index) in dataList" :key="index">
				<div v-if="item.createUserId == nowRowData.adviserUserId" class="my">
					<div class="text-box">
						<p>{{ item.createUserName }}</p>
						<p class="ai-content">{{ item.msgContent }}</p>
					</div>
					<img :src="adviserUserAvatar" alt="" class="icon-img" />
				</div>
				<div v-else class="not-my">
					<img :src="askUserAvatar" alt="" class="icon-img" />
					<div class="text-box">
						<p>{{ item.createUserName }}</p>
						<p class="ai-content">{{ item.msgContent }}</p>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'
import { DowloadPreviewImage } from '@/utils/util'

const props = defineProps<{
	nowRowData: any
}>()

const dataList = ref([])
const adviserUserAvatar = ref('')
const askUserAvatar = ref('')
const getPreviewImage = async (src) => {
	return new Promise(async (resolve, reject) => {
		let imgUrl = ''
		if (src?.includes('ningxiang')) {
			const previewUrl = await DowloadPreviewImage(src)
			imgUrl = previewUrl
		} else {
			imgUrl = src
		}
		resolve(imgUrl || 'https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1718415403134_ac636033.png')
	})
}

const getInitData = () => {
	apiMod
		.view_imChatMsg_page({
			groupTalkId: props.nowRowData.groupTalkId,
			pageParaPO: {
				size: 10000,
			},
		})
		.then((res) => {
			dataList.value = res.data.records.reverse()
		})
}

onMounted(() => {
	getPreviewImage(props.nowRowData.adviserUserAvatar).then((path) => {
		adviserUserAvatar.value = path
	})
	getPreviewImage(props.nowRowData.askUserAvatar).then((path) => {
		askUserAvatar.value = path
	})
	getInitData()
})
</script>

<style scoped lang="scss">
.chat-main {
	padding: 30px;
	display: flex;
	flex-flow: column;
	gap: 20px;
	background: #f3f3f3;
	border-radius: 4px;
  width:100%;
	.chat-ul {
		display: flex;
		flex-flow: column;
		gap: 10px;
	}
}

.chat-flex-start {
	display: flex;
	align-items: flex-start;
	gap: 10px;

	.text-box {
		font-family: 'PingFang SC';
		font-weight: 400;
	}

	.icon-img {
		width: 34px;
		height: 34px;
		border-radius: 50%;
	}
}
.not-my {
	@extend .chat-flex-start;
	justify-content: left;

	.text-box {
		text-align: left;
		color: #7a818c;
		font-size: 14px;
		width: fit-content;

		.ai-content {
			color: #fff;
			font-size: 16px;
			margin-top: 6px;
			background: #0075fb;
			border-radius: 7px;
			padding: 8px 10px;
		}
	}
}

.my {
	@extend .chat-flex-start;
	justify-content: right;

	.text-box {
		text-align: right;
		color: #7a818c;
		font-size: 14px;
		width: fit-content;

		.ai-content {
			color: #fff;
			font-size: 16px;
			margin-top: 6px;
			background: #0075fb;
			border-radius: 7px;
			padding: 8px 10px;
		}
	}
}
</style>
